<template>
  <div class="whole">
    <div class="header">
      <span class="title">后台管理</span
      ><span class="btn" @click="out">退出后台</span>
    </div>
    <div class="main">
      <el-tabs tab-position="left">
        <el-tab-pane label="用户管理">
          <div class="search_input">
            <el-input
              placeholder="请输入需要检索的用户姓名或ID..."
              v-model="s_user"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                class="search_btn"
                @click="search_user"
              ></el-button
            ></el-input>
          </div>
          <div class="table">
            <el-table :data="show_user_list">
              <el-table-column prop="user_id" label="用户ID"></el-table-column>
              <el-table-column
                prop="user_name"
                label="用户名"
              ></el-table-column>
              <el-table-column
                prop="user_email"
                label="用户邮箱"
              ></el-table-column>
              <el-table-column prop="user_state" label="封禁状态"
                ><template slot-scope="scope">
                  <span
                    v-if="scope.row.user_state === false"
                    style="color: #409eff"
                    >未封禁</span
                  >
                  <span v-if="scope.row.user_state === true" style="color: red"
                    >已封禁</span
                  >
                </template>
              </el-table-column>
              <el-table-column prop="user_state" label="操作"
                ><template slot-scope="scope">
                  <el-button
                    type="primary"
                    @click="watch_user(scope.row.user_id)"
                    >查看</el-button
                  >
                  <el-button
                    v-if="scope.row.user_state === false"
                    type="danger"
                    @click="ban_user(scope.row.user_id)"
                    >封禁</el-button
                  >
                  <el-button
                    v-if="scope.row.user_state === true"
                    type="success"
                    @click="unban_user(scope.row.user_id)"
                    >解封</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div style="text-align: center; padding: 13px 0">
            <el-pagination
              background
              layout="prev, pager, next,sizes"
              :current-page.sync="current_user_page"
              :page-size.sync="user_page_size"
              :page-sizes="[5, 10, 20, 40]"
              :total="user_list.length"
              @current-change="change_user_page"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="文献管理">
          <div class="search_input">
            <el-input placeholder="请输入需要检索的文献..." v-model="s_refer">
              <el-select
                v-model="select"
                slot="prepend"
                placeholder="检索类别"
                style="width: 120px"
                ><el-option
                  v-for="item in refer_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option
              ></el-select>
              <el-button
                slot="append"
                icon="el-icon-search"
                class="search_btn"
                @click="search_refer"
              ></el-button
            ></el-input>
          </div>
          <div class="search_set">
            排序:
            <div
              @click="set_order(1)"
              class="order"
              :class="order == 1 || order == 4 ? 'order_choose' : 'order'"
            >
              时间<span :class="order == 1 || order == 4 ? 'show' : 'visible'"
                ><i
                  :class="order == 4 ? 'el-icon-sort-up' : 'el-icon-sort-down'"
                ></i
              ></span>
            </div>
            <div
              @click="set_order(2)"
              class="order"
              :class="order == 2 || order == 5 ? 'order_choose' : 'order'"
            >
              下载量<span :class="order == 2 || order == 5 ? 'show' : 'visible'"
                ><i
                  :class="order == 5 ? 'el-icon-sort-up' : 'el-icon-sort-down'"
                ></i
              ></span>
            </div>
            <div
              @click="set_order(3)"
              class="order"
              :class="order == 3 || order == 6 ? 'order_choose' : 'order'"
            >
              引用量
              <span :class="order == 3 || order == 6 ? 'show' : 'visible'"
                ><i
                  :class="order == 6 ? 'el-icon-sort-up' : 'el-icon-sort-down'"
                ></i
              ></span>
            </div>
          </div>
          <div class="table" style="height: 400px">
            <el-table :data="show_refer_list">
              <el-table-column type="expand">
                <template slot-scope="scope">
                  <el-form label-position="left" class="refer_expand">
                    <el-form-item label="文献ID:"
                      ><span>{{ scope.row.pid }}</span></el-form-item
                    >
                    <el-form-item label="文献标题:"
                      ><span>{{ scope.row.title }}</span></el-form-item
                    >
                    <el-form-item label="文献作者:"
                      ><span
                        v-for="item in scope.row.authors"
                        :key="item.aid"
                        style="padding-right: 15px"
                        >{{ item.name }}(ID:{{ item.aid }})</span
                      ></el-form-item
                    >
                    <el-form-item label="关键词:"
                      ><span
                        v-for="item in scope.row.keywords"
                        :key="item"
                        style="padding-right: 15px"
                        >{{ item }}</span
                      ></el-form-item
                    >
                    <el-form-item label="摘要:">{{
                      scope.row.abstract
                    }}</el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column prop="pid" label="文献ID"></el-table-column>
              <el-table-column prop="title" label="文献标题"></el-table-column>
              <el-table-column prop="authors" label="文献作者"
                ><template slot-scope="scope">
                  <span>{{ scope.row.authors[0].name }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button type="primary" @click="watch_refer(scope.row.pid)"
                    >查看</el-button
                  >
                  <el-button type="danger" @click="delete_refer(scope.row.pid)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div style="text-align: center; padding: 13px 0">
            <el-pagination
              background
              layout="prev, pager, next,sizes"
              :current-page.sync="current_refer_page"
              :page-size.sync="refer_page_size"
              :page-sizes="[5, 10, 20, 40]"
              :total="refer_list.length"
              @current-change="change_refer_page"
            >
              <!-- 这里的total和上面的都要后端传全部总的 -->
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="门户审核">
          <div class="box">
            <div class="h3">申请人</div>
            <div class="item">
              用户名:
              <span class="user_name" @click="watch_user(portal.user_id)">{{
                portal.user_name
              }}</span>
            </div>
            <div class="item">用户姓名: {{ portal.real_name }}</div>
            <div class="item">
              用户ID: <span>{{ portal.user_id }}</span>
            </div>
            <div class="item">用户身份: {{ portal.user_identity }}</div>
            <div class="item">用户单位: {{ portal.user_unit }}</div>
            <div class="item">个人简介: {{ portal.user_introduction }}</div>
            <div class="h3">证明材料</div>
            <div class="item">
              <el-image :src="portal.image"></el-image>
            </div>
            <div class="footer_btn">
              <el-button
                style="width: 110px; margin: 0 30px"
                type="success"
                :disabled="!btn_portal_pass"
                @click="check_portal(true)"
                >通过</el-button
              ><el-button
                style="width: 110px; margin: 0 30px"
                type="warning"
                :disabled="!btn_portal_reject"
                @click="check_portal(false)"
                >拒绝</el-button
              >
              <!-- <el-button
                style="width: 110px; margin: 0 30px"
                type="primary"
                :disabled="!btn_portal_next"
                :loading="portal_loading"
                @click="next_portal"
                >下一个</el-button
              > -->
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="认领文献">
          <div class="box">
            <div class="h3">申请人</div>
            <div class="item">
              用户名:
              <span
                class="user_name"
                @click="watch_user(claim_refer.user_id)"
                >{{ claim_refer.user_name }}</span
              >
            </div>
            <div class="item">用户姓名: {{ claim_refer.real_name }}</div>
            <div class="item">
              用户ID: <span>{{ claim_refer.user_id }}</span>
            </div>
            <div class="h3">认领文献</div>
            <div class="item">
              文献标题:
              <span
                class="refer_title"
                @click="watch_refer(claim_refer.refer_id)"
              >
                {{ claim_refer.refer_title }}</span
              >
            </div>
            <div class="item">
              文献ID: <span>{{ claim_refer.refer_id }}</span>
            </div>
            <div class="item">
              关键字:
              <span
                class="keyword"
                v-for="item in claim_refer.refer_keywords"
                :key="item"
                >{{ item }}</span
              >
            </div>
            <div class="item">
              作者:
              <span
                class="keyword"
                v-for="item in claim_refer.refer_authors"
                :key="item"
                >{{ item.name }}</span
              >
            </div>
            <div class="item">
              摘要: <span>{{ claim_refer.refer_abstract }}</span>
            </div>
            <div class="footer_btn">
              <el-button
                style="width: 110px; margin: 0 30px"
                type="success"
                :disabled="!btn_claim_pass"
                @click="check_claim(true)"
                >通过</el-button
              ><el-button
                style="width: 110px; margin: 0 30px"
                type="warning"
                :disabled="!btn_claim_reject"
                @click="check_claim(false)"
                >拒绝</el-button
              >
              <!-- <el-button
                style="width: 110px; margin: 0 30px"
                type="primary"
                :disabled="!btn_claim_next"
                :loading="claim_loading"
                @click="next_claim"
                >下一个</el-button
              > -->
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      session_id: "",
      s_user: "",
      order: 1,
      select: "",
      s_refer: "",
      current_user_page: 1,
      current_refer_page: 1,
      current_claim_page: 1,
      user_page_size: 10,
      refer_page_size: 10,
      claim_page_size: 10,
      refer_options: [
        { value: "选项1", label: "关键词" },
        { value: "选项2", label: "篇名" },
        { value: "选项3", label: "作者" },
        { value: "xul", label: "学科领域" },
        { value: "选项4", label: "单位" },
        { value: "选项5", label: "摘要" },
        { value: "选项6", label: "分类号" },
        { value: "选项7", label: "DOI" },
      ],
      user_list: [
        {
          user_name: "mkzi1",
          user_id: "123456",
          user_email: "jflsdj@jfdl.com",
          user_state: false,
        },
        {
          user_name: "mkzi2",
          user_id: "1234542",
          user_email: "jflsdj@jfdl.com",
          user_state: true,
        },
        {
          user_name: "mkzi3",
          user_id: "123856",
          user_email: "jflsdj@jfdl.com",
          user_state: false,
        },
        {
          user_name: "mkzi4",
          user_id: "125456",
          user_email: "jflsdj@jfdl.com",
          user_state: false,
        },
        {
          user_name: "mkzi5",
          user_id: "1563456",
          user_email: "jflsdj@jfdl.com",
          user_state: false,
        },
        {
          user_name: "mkzi6",
          user_id: "1663456",
          user_email: "jflsdj@jfdl.com",
          user_state: false,
        },
      ],
      refer_list: [
        {
          pid: 123456,
          title: "bnti1",
          authors: [
            { name: "作者1", aid: 45678 },
            { name: "作者2", aid: 454523 },
            { name: "作者3", aid: 784554 },
          ],
          keywords: ["keyword1", "keyword2", "keyword3", "keyword4"],
          abstract:
            "jfjasdklfjsdnvklsjgiofhgsijgiernbkjgiojjkmksldfjskldjgioujsljg",
        },
        {
          pid: 1231516,
          title: "bnti2",
          authors: [
            { name: "作者1", aid: 45678 },
            { name: "作者2", aid: 454523 },
            { name: "作者3", aid: 784554 },
          ],
          keywords: ["keyword1", "keyword2", "keyword3", "keyword4"],
          abstract:
            "jfjasdklfjsdnvklsjgiofhgsijgiernbkjgiojjkmksldfjskldjgioujsljg",
        },
        {
          pid: 1234556,
          title: "bnti3",
          authors: [
            { name: "作者1", aid: 45678 },
            { name: "作者2", aid: 454523 },
            { name: "作者3", aid: 784554 },
          ],
          keywords: ["keyword1", "keyword2", "keyword3", "keyword4"],
          abstract:
            "jfjasdklfjsdnvklsjgiofhgsijgiernbkjgiojjkmksldfjskldjgioujsljg",
        },
      ],
      portal: {
        apply_id: "",
        user_name: "sjflsd",
        real_name: "xbmk",
        user_id: "478454",
        user_identity: "大学生",
        user_unit: "xx大学",
        user_introduction: "单方龙卷风岭东街飞来寺啃囧等",
        image:
          "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg", //证明图片
      },
      claim_refer: {
        user_name: "认领人",
        real_name: "姓名",
        user_id: 45465,
        refer_id: 456423,
        refer_title: "论文标题jfkd",
        refer_keywords: ["fjdkfj", "jfdlfjld", "jfsfj", "fjdkfj"],
        refer_abstract: "sfdsjflskdflksdjfffffffsdlfkj",
        refer_authors: [
          { name: "作者1", aid: 1495 },
          { name: "rflkjfkd", aid: 895323 },
          { name: "作者51", aid: 144795 },
          { name: "作者75", aid: 7755495 },
        ],
      },
      claim_loading: false,
      btn_claim_reject: true,
      btn_claim_pass: true,
      btn_claim_next: false,
      portal_loading: false,
      btn_portal_reject: true,
      btn_portal_pass: true,
      btn_portal_next: false,
    };
  },
  mounted() {
    var session = window.sessionStorage.getItem("session_id");
    this.session_id = session;
    if (this.$store.state.isAdminLogin === false) {
      this.$message.error("无访问权限!");
      this.$router.push("/Mainpage");
    } else {
      this.next_portal();
      this.next_claim();
    }
  },
  methods: {
    out() {
      this.$store.commit("logout");
      this.$message.info("管理员退出!");
      this.$router.push("/Mainpage");
    },
    search_user() {},
    search_refer() {},
    ban_user(aid) {
      alert(aid);
    },
    unban_user(aid) {
      alert(aid);
    },
    delete_refer(pid) {
      alert(pid);
    },
    watch_user(aid) {
      alert(aid);
    },
    watch_refer(pid) {
      const { href } = this.$router.resolve("/Information/" + pid);
      window.open(href, "_blank");
    },
    check_portal(isPass) {
      //审核申请门户
      this.btn_portal_reject = false;
      this.btn_portal_pass = false;
      this.btn_portal_next = true;
      if (isPass) {
        //通过
        this.$http
          .post("/addResearchPortal", {
            user_id: this.portal.user_id,
            apply_id: this.portal.apply_id,
            research_org: this.portal.user_unit,
            avatar: this.portal.image,
            research_name: this.portal.real_name,
            research_position: this.portal.user_identity,
            description: this.portal.user_introduction,
            session_id: this.session_id,
          })
          .then((res) => {
            if (res.data.success === "true") {
              this.$message.success("提交成功!");
              this.next_portal();
            } else {
              this.$message.error(res.data.message);
            }
          });
      } else {
        //拒绝
        this.$http
          .post("/refuseApplication", {
            apply_id: this.portal.apply_id,
            user_id: this.portal.user_id,
            session_id: this.session_id,
          })
          .then((res) => {
            if (res.data.success === "true") {
              this.$message.success("提交成功!");
              this.next_portal();
            } else {
              this.$message.error(res.data.message);
            }
          });
      }
    },
    check_claim(isPass) {
      //审核认领文献
      this.btn_claim_reject = false;
      this.btn_claim_pass = false;
      this.btn_claim_next = true;
      if (isPass) {
      }

      this.next_claim();
    },
    next_portal() {
      //请求下一个门户申请
      this.claim_loading = true;
      var session_id = window.sessionStorage.getItem("session_id");
      this.$http
        .post("/getApplyResearchPortal", { session_id: session_id })
        .then((res) => {
          if (res.data.success === "true") {
            this.portal.user_id = res.data.user_id;
            this.portal.apply_id = res.data.apply_id;
            this.portal.user_unit = res.data.research_org;
            this.portal.user_identity = res.data.research_position;
            this.portal.user_introduction = res.data.description;
            this.portal.real_name = res.data.research_name;
            this.portal.image = res.data.avatar;
            this.$message.success(res.data.message);
          } else {
            this.$message(res.data.message);
          }
          this.btn_portal_reject = true;
          this.btn_portal_pass = true;
          this.btn_portal_next = false;
          this.portal_loading = false;
        })
        .catch((err) => {
          this.$message.error("网络错误,请稍后再试!");
        });
    },
    next_claim() {
      this.claim_loading = true;

      this.btn_claim_reject = true;
      this.btn_claim_pass = true;
      this.btn_claim_next = false;
      this.claim_loading = false;
    },
    change_user_page(page) {},
    change_refer_page(page) {},
    set_order(type) {
      //排序
      // console.log(type);
      if (this.order === type) {
        this.order = type + 3;
      } else this.order = type;
      //>>>>>>>>>>>>>>>
      //需要重新获取
    },
  },
  computed: {
    show_user_list() {
      return this.user_list.slice(
        this.user_page_size * (this.current_user_page - 1),
        this.user_page_size * this.current_user_page
      );
    },
    show_refer_list() {
      return this.refer_list.slice(
        this.refer_page_size * (this.current_refer_page - 1),
        this.refer_page_size * this.current_refer_page
      );
    },
  },
};
</script>

 <style lang="less" scoped>
.whole {
  min-width: 1200px;
}
.header {
  width: 100%;
  background-color: rgba(247, 247, 247, 0.8);
  height: 60px;
  line-height: 60px;
}
.main {
  height: 650px;
  // background-color: #eeeeee;
}
/deep/.el-tabs {
  height: 100%;
}
/deep/.el-tabs__item {
  width: 170px;
  text-align: center !important;
  font-size: 20px;
  height: 60px;
  line-height: 60px;
}
.title {
  display: inline-block;
  font-size: 27px;
  font-weight: 600;
  height: 60px;
  line-height: 60px;
  font-family: "Microsoft YaHei";
  color: #215db1;
  user-select: none;
  margin-left: 30px;
  overflow: auto;
}
.btn {
  display: inline-block;
  position: absolute;
  right: 0;
  height: 60px;
  line-height: 60px;
  font-weight: 600;
  user-select: none;
  cursor: pointer;
  padding: 0 20px;
  color: #215db1;
}
.btn:hover {
  color: #ff6c00;
  background-color: rgba(230, 230, 230, 0.6);
}
.search_input {
  width: 60%;
  margin: 25px auto;
}
.search_btn {
  width: 80px;
}
.table {
  margin: 0 auto;
  min-height: 500px;
  width: 80%;
}
.search_set {
  width: 80%;
  font-size: 17px;
  margin: 15px auto;
  padding-bottom: 5px;
  text-align: right;
  border-bottom: 1px dashed #ccc;
}
.order {
  display: inline;
  margin: 0 5px;
  user-select: none;
}
.visible {
  visibility: hidden;
}
.show {
  visibility: unset;
}
.order_choose {
  color: #0f5de5;
}
.order:hover {
  color: #0f5de5;
  cursor: pointer;
}
/deep/.el-form-item__label {
  width: 90px;
  color: #99a9bf;
}
/deep/ .el-form-item__content {
  width: 800px;
}
/deep/.el-tab-pane {
  max-height: 650px;
  overflow: auto;
}
.refer_title {
  user-select: none;
  cursor: pointer;
  color: #0f5de5;
}
.refer_title:hover {
  color: #ff6c00;
}
.user_name {
  user-select: none;
  cursor: pointer;
  color: #0f5de5;
}
.user_name:hover {
  color: #ff6c00;
}
.box {
  width: 60%;
  margin: 0 auto;
}
.h3 {
  font-size: 25px;
  font-weight: 600;
  color: #215db1;
  padding-bottom: 5px;
  padding-top: 10px;
  border-bottom: 1px dashed #ccc;
  user-select: none;
}
.item {
  padding-top: 17px;
  font-size: 17px;
  color: #515a6e;
  user-select: none;
}
.keyword {
  padding: 0 7px;
}
.footer_btn {
  margin-top: 50px;
  text-align: center;
}
</style>